<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学员信息录入</title>
  <link rel="stylesheet" href="./clean_style.css">
  <style>
    .box{
      width: 100%;
      height: 1000px;
    }
    .box-context{
      width: 65%;
      height:10800px;
      margin: 0 auto;
      background-color: aqua;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    h2{
      text-align: center;
      line-height: 80px;
    }
    .add-content input{
      margin-right: 10px;
    }
    .add-content select{
      margin-right: 10px;
    }
    .add button{
      background-color: #154183;
      border-radius: 5px;
      width: 55px;
      color: white;
    }
    .show{
      width: 640px;
    }  
    table{
      width: 640px;
      border: 1px solid black;
      border-collapse: collapse;
    }
    table th{
      background-color: #d3e5ff; 
      border: 1px solid black;
    }
    table tr:hover{
      background-color: #e2ecf7;
    }
    table td{
      border: 1px solid black;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box-context">
      <!-- 学员添加模块 -->
      <div class="add">
        <h2>新增学员</h2>
        <form class="add-content">
          <span>姓名</span><input style="width: 65px;">
          <span>年龄</span><input style="width: 35px;">
          <span>性别:</span>
            <select>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          <span>薪资:</span><input style="width: 65px;">
          <span>城市:</span>
            <select>
              <option value="北京">北京</option>
              <option value="深圳">深圳</option>
              <option value="杭州">杭州</option>
              <option value="南京">南京</option>
            </select>
          <button type="button">录入</button>
        </form>
      </div>
      <!-- 学员展示模块 -->
      <div class="show">
        <h2>就业榜</h2>
        <table>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>城市</th>
          <th>操作</th>
        </table>
      </div>
    </div>
  </div>

  <script>
    const add = document.querySelector('.add-content button')
    const table = document.querySelector('.show table')
    const form = document.querySelector('.add-content')
    let i = 1

    //添加模块
    add.addEventListener('click',()=>{
      let name = document.querySelector('.add-content input:nth-of-type(1)').value || ''
      let age = document.querySelector('.add-content input:nth-of-type(2)').value || '' 
      let sex = document.querySelector('.add-content select:nth-of-type(1)').value || ''
      let salary = document.querySelector('.add-content input:nth-of-type(3)').value || ''
      let city = document.querySelector('.add-content select:nth-of-type(2)').value || ''
      if(name && age && sex && salary && city){
        let tr = document.createElement('tr')
        tr.innerHTML = `
          <td>${i}</td>
          <td>${name}</td>
          <td>${age}</td>
          <td>${sex}</td>
          <td>${salary}</td>
          <td>${city}</td>
          <td>删除</td>`
        table.appendChild(tr)
        form.reset()
        ++i
      }
      else{
        alert('请输入完整信息 ')
      }
    })

    //删除模块
    table.addEventListener('click',e=>{
      if(e.target.innerHTML === '删除' && e.target.nodeName === 'TD'){
        let parent = e.target.parentNode
        parent.parentNode.removeChild(parent)
      }
    })
  </script>
</body>
</html>